<!--
    步骤组件待提取
-->
<template>
    <div>
        <Modal v-model="modal" class="modal-full modal-step" width=900>
            <div slot="header" class="page-step">
                <Steps :current="current">
                    <Step title="文件上传"></Step>
                    <Step title="映射设置"></Step>
                    <Step title="处理工序"></Step>
                </Steps>
            </div>
            <div>
                <step-upload ref="0" @next="toNext" v-if="stepMax>=0" :active="currentActive(0)"></step-upload>
                <step-mapping ref="1" @next="toNext" v-if="stepMax>=1" :active="currentActive(1)"></step-mapping>
                <step-process ref="2" @next="complete" v-if="stepMax>=2" :active="currentActive(2)"></step-process>
            </div>
            <div slot="footer" class="button-panel-button">
                <i-button @click="close">取消</i-button>
                <i-button @click="previous" type="ghost" :disabled="current<1">上一步</i-button>
                <i-button v-if="current<lastStep" type="primary" @click="next" :disabled="!nextEnable">下一步</i-button>
                <i-button v-if="current===lastStep && 0" type="success" @click="next">发布</i-button>
                <i-button v-if="current>0" type="primary" @click="complete">保存</i-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import ModalBase from '../modalBase'
import StepUpload from './steps/stepUpload'
import StepMapping from './steps/stepMapping'
import StepProcess from './steps/stepProcess'
import moduleStore from './store'
import Modal from '@/element/modal'
export default {
    extends: ModalBase,
    moduleStore,
    props: {
        open: {}
    },
    data() {
        return {
            current: 0,
            stepMax: 0,
            lastStep: 2,
            modal: false
        }
    },
    computed: {
        nextEnable() {
            if (this.current === 0) {
                return 1 || this.data.name && this.data.code && this.data.ds_id && this.fileName
            } else {
                return true
            }
        }
    },
    watch: {
        open(v) {
            this.modal = v
            this.stepMax = -1
            this.current = 0
            //重建组件
            this.$nextTick(() => {
                this.stepMax = 0
            })
        },
        modal(v) {
            this.$emit('update:open', v)
            //this.open = false
        }
    },
    created() {
    },
    methods: {
        load() {
            this.clear()
            this.setSetp(true)
            this.fetchDs()
        },
        complete() {
            this.getSubmitData().then((data) => {
                this.$emit('save', data)
            })
        },
        next() {
            if (this.current <= this.lastStep) {
                this.$refs[this.current].submit()
            }
        },
        toNext() {
            if (this.current < this.lastStep) {
                this.current++
                if (this.stepMax < this.current) {
                    this.stepMax = this.current
                }
            }
        },
        currentActive(index) {
            return this.current === index
        },
        previous() {
            if (this.current > 0) {
                this.current--
            }
        }
    },
    components: {
        StepUpload,
        StepMapping,
        StepProcess,
        Modal
    }
}
</script>

<style lang="less">
.modal-step {
    &.modal-full .ivu-modal .ivu-modal-content .ivu-modal-body {
        margin-top: -130px;
        padding: 130px 0 0 0;
    }
    .button-panel-button {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        padding: 10px;
        text-align: right;
    }
}


.page-step {
    padding: 10px;
}
</style>
